<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仓河便签 - 应用原型</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366f1',
                        secondary: '#f59e0b',
                        accent: '#10b981'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-900 font-sans">
    <div class="max-w-6xl mx-auto p-6">
        <h1 class="text-3xl font-bold text-center mb-8 text-gray-100">仓河便签应用 - 完整原型设计</h1>
        
        <!-- 主界面 - 便签列表 -->
        <div class="bg-gray-800 rounded-lg shadow-lg p-6 mb-8">
            <h2 class="text-2xl font-semibold mb-4 text-gray-200 flex items-center">
                <i class="fas fa-home mr-2 text-primary"></i>
                主界面 - 便签列表
            </h2>
            
            <!-- 顶部导航栏 -->
            <div class="bg-primary text-white p-4 rounded-lg mb-4">
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <i class="fas fa-sticky-note text-2xl mr-3"></i>
                        <h3 class="text-xl font-semibold">仓河便签</h3>
                    </div>
                    <div class="flex space-x-3">
                        <button class="p-2 hover:bg-white hover:bg-opacity-20 rounded-full transition-all">
                            <i class="fas fa-search"></i>
                        </button>
                        <button class="p-2 hover:bg-white hover:bg-opacity-20 rounded-full transition-all">
                            <i class="fas fa-cog"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 快速操作栏 -->
            <div class="flex justify-between items-center mb-6 bg-gray-700 p-4 rounded-lg">
                <div class="flex space-x-2">
                    <button class="px-3 py-2 bg-primary text-white rounded-lg text-sm hover:bg-blue-600 transition-all">
                        <i class="fas fa-sticky-note mr-1"></i>全部
                    </button>
                    <button class="px-3 py-2 bg-gray-600 text-gray-200 rounded-lg text-sm hover:bg-gray-500 transition-all">
                        <i class="fas fa-star mr-1"></i>收藏
                    </button>
                    <button class="px-3 py-2 bg-gray-600 text-gray-200 rounded-lg text-sm hover:bg-gray-500 transition-all">
                        <i class="fas fa-tag mr-1"></i>分类
                    </button>
                </div>
                <button class="bg-accent text-white px-4 py-2 rounded-lg font-medium hover:bg-green-600 transition-all">
                    <i class="fas fa-plus mr-1"></i>新建便签
                </button>
            </div>

            <!-- 便签网格 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <!-- 便签卡片 1 -->
                <div class="bg-yellow-800 p-4 rounded-lg shadow-sm hover:shadow-md transition-all border-l-4 border-yellow-400">
                    <div class="flex justify-between items-start mb-2">
                        <h4 class="font-semibold text-yellow-100 truncate">工作计划</h4>
                        <div class="flex space-x-1">
                            <i class="fas fa-star text-yellow-300 cursor-pointer"></i>
                            <i class="fas fa-ellipsis-v text-yellow-200 cursor-pointer"></i>
                        </div>
                    </div>
                    <p class="text-yellow-200 text-sm mb-3 line-clamp-3">
                        今天需要完成的任务：
                        1. 完成项目设计方案
                        2. 参加下午会议
                        3. 整理文档资料
                    </p>
                    <div class="flex justify-between items-center text-xs text-yellow-300">
                        <span>2024-01-15 09:30</span>
                        <span class="bg-yellow-600 px-2 py-1 rounded-full text-yellow-100">工作</span>
                    </div>
                </div>

                <!-- 便签卡片 2 -->
                <div class="bg-blue-800 p-4 rounded-lg shadow-sm hover:shadow-md transition-all border-l-4 border-blue-400">
                    <div class="flex justify-between items-start mb-2">
                        <h4 class="font-semibold text-blue-100 truncate">购物清单</h4>
                        <div class="flex space-x-1">
                            <i class="far fa-star text-blue-200 cursor-pointer"></i>
                            <i class="fas fa-ellipsis-v text-blue-200 cursor-pointer"></i>
                        </div>
                    </div>
                    <p class="text-blue-200 text-sm mb-3 line-clamp-3">
                        需要购买：
                        - 牛奶、面包
                        - 新鲜蔬菜
                        - 洗发水
                    </p>
                    <div class="flex justify-between items-center text-xs text-blue-300">
                        <span>2024-01-14 18:45</span>
                        <span class="bg-blue-600 px-2 py-1 rounded-full text-blue-100">生活</span>
                    </div>
                </div>

                <!-- 便签卡片 3 -->
                <div class="bg-green-800 p-4 rounded-lg shadow-sm hover:shadow-md transition-all border-l-4 border-green-400">
                    <div class="flex justify-between items-start mb-2">
                        <h4 class="font-semibold text-green-100 truncate">学习笔记</h4>
                        <div class="flex space-x-1">
                            <i class="fas fa-star text-yellow-300 cursor-pointer"></i>
                            <i class="fas fa-ellipsis-v text-green-200 cursor-pointer"></i>
                        </div>
                    </div>
                    <p class="text-green-200 text-sm mb-3 line-clamp-3">
                        今天学习了JavaScript的新特性...
                        ES6的解构赋值语法很有用
                    </p>
                    <div class="flex justify-between items-center text-xs text-green-300">
                        <span>2024-01-13 20:15</span>
                        <span class="bg-green-600 px-2 py-1 rounded-full text-green-100">学习</span>
                    </div>
                </div>

                <!-- 便签卡片 4 -->
                <div class="bg-pink-800 p-4 rounded-lg shadow-sm hover:shadow-md transition-all border-l-4 border-pink-400">
                    <div class="flex justify-between items-start mb-2">
                        <h4 class="font-semibold text-pink-100 truncate">旅行计划</h4>
                        <div class="flex space-x-1">
                            <i class="far fa-star text-pink-200 cursor-pointer"></i>
                            <i class="fas fa-ellipsis-v text-pink-200 cursor-pointer"></i>
                        </div>
                    </div>
                    <p class="text-pink-200 text-sm mb-3 line-clamp-3">
                        春节假期想去三亚旅游
                        需要提前订酒店和机票
                    </p>
                    <div class="flex justify-between items-center text-xs text-pink-300">
                        <span>2024-01-12 16:20</span>
                        <span class="bg-pink-600 px-2 py-1 rounded-full text-pink-100">旅行</span>
                    </div>
                </div>

                <!-- 便签卡片 5 -->
                <div class="bg-purple-800 p-4 rounded-lg shadow-sm hover:shadow-md transition-all border-l-4 border-purple-400">
                    <div class="flex justify-between items-start mb-2">
                        <h4 class="font-semibold text-purple-100 truncate">读书笔记</h4>
                        <div class="flex space-x-1">
                            <i class="fas fa-star text-yellow-300 cursor-pointer"></i>
                            <i class="fas fa-ellipsis-v text-purple-200 cursor-pointer"></i>
                        </div>
                    </div>
                    <p class="text-purple-200 text-sm mb-3 line-clamp-3">
                        《设计心理学》第三章要点：
                        用户体验的重要性...
                    </p>
                    <div class="flex justify-between items-center text-xs text-purple-300">
                        <span>2024-01-11 21:30</span>
                        <span class="bg-purple-600 px-2 py-1 rounded-full text-purple-100">阅读</span>
                    </div>
                </div>

                <!-- 便签卡片 6 -->
                <div class="bg-orange-800 p-4 rounded-lg shadow-sm hover:shadow-md transition-all border-l-4 border-orange-400">
                    <div class="flex justify-between items-start mb-2">
                        <h4 class="font-semibold text-orange-100 truncate">健身计划</h4>
                        <div class="flex space-x-1">
                            <i class="far fa-star text-orange-200 cursor-pointer"></i>
                            <i class="fas fa-ellipsis-v text-orange-200 cursor-pointer"></i>
                        </div>
                    </div>
                    <p class="text-orange-200 text-sm mb-3 line-clamp-3">
                        本周健身安排：
                        周一、三、五 - 力量训练
                        周二、四 - 有氧运动
                    </p>
                    <div class="flex justify-between items-center text-xs text-orange-300">
                        <span>2024-01-10 07:00</span>
                        <span class="bg-orange-600 px-2 py-1 rounded-full text-orange-100">健身</span>
                    </div>
                </div>
            </div>

            <!-- 底部统计 -->
            <div class="mt-6 p-4 bg-gray-700 rounded-lg">
                <div class="flex justify-between items-center text-sm text-gray-300">
                    <span>共 6 条便签</span>
                    <span>最后更新：2024-01-15 09:30</span>
                </div>
            </div>
        </div>

        <!-- 创建/编辑便签界面 -->
        <div class="bg-gray-800 rounded-lg shadow-lg p-6 mb-8">
            <h2 class="text-2xl font-semibold mb-4 text-gray-200 flex items-center">
                <i class="fas fa-edit mr-2 text-accent"></i>
                创建/编辑便签界面
            </h2>
            
            <!-- 编辑器顶部栏 -->
            <div class="bg-gray-700 p-4 rounded-lg mb-4">
                <div class="flex justify-between items-center mb-4">
                    <div class="flex items-center space-x-4">
                        <button class="text-gray-300 hover:text-gray-100">
                            <i class="fas fa-arrow-left text-lg"></i>
                        </button>
                        <h3 class="text-lg font-semibold text-gray-200">编辑便签</h3>
                    </div>
                    <div class="flex space-x-2">
                        <button class="px-4 py-2 bg-gray-600 text-gray-200 rounded-lg hover:bg-gray-500 transition-all">
                            取消
                        </button>
                        <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-all">
                            保存
                        </button>
                    </div>
                </div>

                <!-- 工具栏 -->
                <div class="flex items-center space-x-4 border-t border-gray-600 pt-4">
                    <div class="flex items-center space-x-2">
                        <span class="text-sm text-gray-300">颜色：</span>
                        <div class="flex space-x-1">
                            <div class="w-6 h-6 bg-yellow-400 rounded-full cursor-pointer ring-2 ring-yellow-400"></div>
                            <div class="w-6 h-6 bg-blue-400 rounded-full cursor-pointer"></div>
                            <div class="w-6 h-6 bg-green-400 rounded-full cursor-pointer"></div>
                            <div class="w-6 h-6 bg-pink-400 rounded-full cursor-pointer"></div>
                            <div class="w-6 h-6 bg-purple-400 rounded-full cursor-pointer"></div>
                            <div class="w-6 h-6 bg-orange-400 rounded-full cursor-pointer"></div>
                        </div>
                    </div>
                    
                    <div class="flex items-center space-x-2">
                        <span class="text-sm text-gray-300">分类：</span>
                        <select class="px-3 py-1 border border-gray-600 bg-gray-600 text-gray-200 rounded-md text-sm">
                            <option>工作</option>
                            <option>生活</option>
                            <option>学习</option>
                            <option>旅行</option>
                            <option>健身</option>
                            <option>阅读</option>
                        </select>
                    </div>

                    <button class="flex items-center space-x-1 px-3 py-1 bg-yellow-800 text-yellow-200 rounded-md hover:bg-yellow-700 transition-all">
                        <i class="far fa-star"></i>
                        <span class="text-sm">收藏</span>
                    </button>
                </div>
            </div>

            <!-- 编辑区域 -->
            <div class="bg-yellow-900 border-l-4 border-yellow-400 rounded-lg p-4">
                <input type="text" placeholder="便签标题..." 
                       class="w-full text-lg font-semibold bg-transparent border-none outline-none placeholder-yellow-300 text-yellow-100 mb-3"
                       value="新的工作计划">
                
                <textarea placeholder="在这里输入便签内容..." 
                          class="w-full h-64 bg-transparent border-none outline-none resize-none placeholder-yellow-300 text-yellow-200 leading-relaxed"
                          >今天需要完成的重要任务：

1. 完成便签应用的原型设计
   - 设计主界面布局
   - 创建编辑界面
   - 优化用户体验

2. 整理项目文档
   - 更新需求文档
   - 编写设计说明

3. 团队会议准备
   - 准备演示材料
   - 总结项目进度

备注：记得在会议前再次检查所有内容。</textarea>

                <!-- 底部信息栏 -->
                <div class="flex justify-between items-center mt-4 pt-4 border-t border-yellow-600">
                    <div class="flex items-center space-x-4 text-sm text-yellow-300">
                        <span><i class="fas fa-clock mr-1"></i>创建时间：2024-01-15 09:30</span>
                        <span><i class="fas fa-edit mr-1"></i>最后编辑：2024-01-15 10:15</span>
                    </div>
                    <div class="text-sm text-yellow-300">
                        <span>字数：168</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 搜索界面 -->
        <div class="bg-gray-800 rounded-lg shadow-lg p-6 mb-8">
            <h2 class="text-2xl font-semibold mb-4 text-gray-200 flex items-center">
                <i class="fas fa-search mr-2 text-secondary"></i>
                搜索界面
            </h2>
            
            <!-- 搜索栏 -->
            <div class="relative mb-6">
                <input type="text" placeholder="搜索便签内容、标题或标签..." 
                       class="w-full p-4 pr-12 border-2 border-gray-600 bg-gray-700 text-gray-200 placeholder-gray-400 rounded-lg focus:border-primary focus:outline-none"
                       value="工作计划">
                <button class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-200">
                    <i class="fas fa-search text-lg"></i>
                </button>
            </div>

            <!-- 搜索过滤器 -->
            <div class="flex flex-wrap gap-2 mb-6">
                <button class="px-3 py-2 bg-primary text-white rounded-lg text-sm">全部</button>
                <button class="px-3 py-2 bg-gray-600 text-gray-200 rounded-lg text-sm hover:bg-gray-500">标题</button>
                <button class="px-3 py-2 bg-gray-600 text-gray-200 rounded-lg text-sm hover:bg-gray-500">内容</button>
                <button class="px-3 py-2 bg-gray-600 text-gray-200 rounded-lg text-sm hover:bg-gray-500">标签</button>
                <button class="px-3 py-2 bg-gray-600 text-gray-200 rounded-lg text-sm hover:bg-gray-500">收藏</button>
            </div>

            <!-- 搜索结果 -->
            <div class="space-y-4">
                <div class="border-l-4 border-yellow-400 bg-yellow-900 p-4 rounded-lg">
                    <div class="flex justify-between items-start mb-2">
                        <h4 class="font-semibold text-yellow-100">工作计划</h4>
                        <span class="text-xs text-yellow-300">2024-01-15 09:30</span>
                    </div>
                    <p class="text-yellow-200 text-sm mb-2">
                        今天需要完成的任务：1. 完成项目设计方案 2. 参加下午会议 3. 整理文档资料...
                    </p>
                    <div class="flex justify-between items-center">
                        <span class="bg-yellow-600 px-2 py-1 rounded-full text-xs text-yellow-100">工作</span>
                        <div class="text-xs text-yellow-300">匹配：标题</div>
                    </div>
                </div>

                <div class="border-l-4 border-purple-400 bg-purple-900 p-4 rounded-lg">
                    <div class="flex justify-between items-start mb-2">
                        <h4 class="font-semibold text-purple-100">项目进度记录</h4>
                        <span class="text-xs text-purple-300">2024-01-12 14:20</span>
                    </div>
                    <p class="text-purple-200 text-sm mb-2">
                        本周<mark class="bg-yellow-600 text-yellow-100 px-1 rounded">工作计划</mark>进度很顺利，所有任务都按时完成...
                    </p>
                    <div class="flex justify-between items-center">
                        <span class="bg-purple-600 px-2 py-1 rounded-full text-xs text-purple-100">工作</span>
                        <div class="text-xs text-purple-300">匹配：内容</div>
                    </div>
                </div>
            </div>

            <!-- 搜索统计 -->
            <div class="mt-6 p-4 bg-gray-700 rounded-lg">
                <div class="text-sm text-gray-300 text-center">
                    找到 2 条相关便签
                </div>
            </div>
        </div>

        <!-- 设置界面 -->
        <div class="bg-gray-800 rounded-lg shadow-lg p-6 mb-8">
            <h2 class="text-2xl font-semibold mb-4 text-gray-200 flex items-center">
                <i class="fas fa-cog mr-2 text-gray-400"></i>
                设置界面
            </h2>
            
            <div class="space-y-6">
                <!-- 通用设置 -->
                <div class="border-b border-gray-600 pb-6">
                    <h3 class="text-lg font-semibold mb-4 text-gray-200">通用设置</h3>
                    <div class="space-y-4">
                        <div class="flex justify-between items-center">
                            <div>
                                <h4 class="font-medium text-gray-200">深色模式</h4>
                                <p class="text-sm text-gray-400">切换应用外观主题</p>
                            </div>
                            <div class="relative">
                                <input type="checkbox" class="sr-only" id="darkMode" checked>
                                <label for="darkMode" class="flex items-center cursor-pointer">
                                    <div class="w-10 h-6 bg-primary rounded-full relative">
                                        <div class="w-4 h-4 bg-white rounded-full absolute right-1 top-1 transition-transform"></div>
                                    </div>
                                </label>
                            </div>
                        </div>

                        <div class="flex justify-between items-center">
                            <div>
                                <h4 class="font-medium text-gray-200">自动保存</h4>
                                <p class="text-sm text-gray-400">编辑时自动保存便签</p>
                            </div>
                            <div class="relative">
                                <input type="checkbox" class="sr-only" id="autoSave" checked>
                                <label for="autoSave" class="flex items-center cursor-pointer">
                                    <div class="w-10 h-6 bg-primary rounded-full relative">
                                        <div class="w-4 h-4 bg-white rounded-full absolute right-1 top-1 transition-transform"></div>
                                    </div>
                                </label>
                            </div>
                        </div>

                        <div class="flex justify-between items-center">
                            <div>
                                <h4 class="font-medium text-gray-200">默认便签颜色</h4>
                                <p class="text-sm text-gray-400">新建便签的默认颜色</p>
                            </div>
                            <div class="flex space-x-1">
                                <div class="w-6 h-6 bg-yellow-400 rounded-full cursor-pointer ring-2 ring-yellow-400"></div>
                                <div class="w-6 h-6 bg-blue-400 rounded-full cursor-pointer"></div>
                                <div class="w-6 h-6 bg-green-400 rounded-full cursor-pointer"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 数据管理 -->
                <div class="border-b border-gray-600 pb-6">
                    <h3 class="text-lg font-semibold mb-4 text-gray-200">数据管理</h3>
                    <div class="space-y-4">
                        <button class="w-full p-3 bg-primary text-white rounded-lg hover:bg-blue-600 transition-all text-left">
                            <div class="flex items-center justify-between">
                                <div>
                                    <h4 class="font-medium">导出数据</h4>
                                    <p class="text-sm text-blue-100">将所有便签导出为JSON文件</p>
                                </div>
                                <i class="fas fa-download"></i>
                            </div>
                        </button>

                        <button class="w-full p-3 bg-accent text-white rounded-lg hover:bg-green-600 transition-all text-left">
                            <div class="flex items-center justify-between">
                                <div>
                                    <h4 class="font-medium">导入数据</h4>
                                    <p class="text-sm text-green-100">从文件导入便签数据</p>
                                </div>
                                <i class="fas fa-upload"></i>
                            </div>
                        </button>

                        <button class="w-full p-3 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-all text-left">
                            <div class="flex items-center justify-between">
                                <div>
                                    <h4 class="font-medium">清空所有数据</h4>
                                    <p class="text-sm text-red-100">删除所有便签（不可恢复）</p>
                                </div>
                                <i class="fas fa-trash-alt"></i>
                            </div>
                        </button>
                    </div>
                </div>

                <!-- 关于应用 -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 text-gray-200">关于应用</h3>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between">
                            <span class="text-gray-200">应用版本</span>
                            <span class="text-gray-400">v1.0.0</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-200">开发者</span>
                            <span class="text-gray-400">仓河团队</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-200">最后更新</span>
                            <span class="text-gray-400">2024-01-15</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 移动端适配预览 -->
        <div class="bg-gray-800 rounded-lg shadow-lg p-6">
            <h2 class="text-2xl font-semibold mb-4 text-gray-200 flex items-center">
                <i class="fas fa-mobile-alt mr-2 text-primary"></i>
                移动端界面预览
            </h2>
            
            <div class="max-w-sm mx-auto bg-gray-900 rounded-3xl p-2">
                <div class="bg-gray-800 rounded-2xl p-4 h-96 overflow-y-auto">
                    <!-- 移动端顶部 -->
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-semibold text-gray-100">仓河便签</h3>
                        <div class="flex space-x-2">
                            <i class="fas fa-search text-gray-300"></i>
                            <i class="fas fa-plus text-primary"></i>
                        </div>
                    </div>

                    <!-- 移动端便签列表 -->
                    <div class="space-y-3">
                        <div class="bg-yellow-800 p-3 rounded-lg border-l-4 border-yellow-400">
                            <h4 class="font-semibold text-sm mb-1 text-yellow-100">工作计划</h4>
                            <p class="text-xs text-yellow-200 mb-2">今天需要完成的任务...</p>
                            <div class="flex justify-between items-center text-xs">
                                <span class="bg-yellow-600 px-2 py-1 rounded-full text-yellow-100">工作</span>
                                <span class="text-yellow-300">09:30</span>
                            </div>
                        </div>

                        <div class="bg-blue-800 p-3 rounded-lg border-l-4 border-blue-400">
                            <h4 class="font-semibold text-sm mb-1 text-blue-100">购物清单</h4>
                            <p class="text-xs text-blue-200 mb-2">需要购买的物品...</p>
                            <div class="flex justify-between items-center text-xs">
                                <span class="bg-blue-600 px-2 py-1 rounded-full text-blue-100">生活</span>
                                <span class="text-blue-300">18:45</span>
                            </div>
                        </div>

                        <div class="bg-green-800 p-3 rounded-lg border-l-4 border-green-400">
                            <h4 class="font-semibold text-sm mb-1 text-green-100">学习笔记</h4>
                            <p class="text-xs text-green-200 mb-2">JavaScript新特性...</p>
                            <div class="flex justify-between items-center text-xs">
                                <span class="bg-green-600 px-2 py-1 rounded-full text-green-100">学习</span>
                                <span class="text-green-300">20:15</span>
                            </div>
                        </div>
                    </div>

                    <!-- 底部导航 -->
                    <div class="fixed bottom-2 left-2 right-2 bg-gray-800 border-t border-gray-600 pt-2">
                        <div class="flex justify-around">
                            <button class="flex flex-col items-center text-primary">
                                <i class="fas fa-home text-lg"></i>
                                <span class="text-xs">首页</span>
                            </button>
                            <button class="flex flex-col items-center text-gray-400">
                                <i class="fas fa-search text-lg"></i>
                                <span class="text-xs">搜索</span>
                            </button>
                            <button class="flex flex-col items-center text-gray-400">
                                <i class="fas fa-plus text-lg"></i>
                                <span class="text-xs">新建</span>
                            </button>
                            <button class="flex flex-col items-center text-gray-400">
                                <i class="fas fa-cog text-lg"></i>
                                <span class="text-xs">设置</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 脚本功能演示 -->
    <script>
        // 模拟交互功能
        document.addEventListener('DOMContentLoaded', function() {
            // 切换收藏状态
            document.querySelectorAll('.fa-star').forEach(star => {
                star.addEventListener('click', function() {
                    this.classList.toggle('fas');
                    this.classList.toggle('far');
                    this.classList.toggle('text-yellow-300');
                    // 根据父级颜色调整未收藏状态的颜色
                    const parentBg = this.closest('[class*="bg-"]').className;
                    if (parentBg.includes('yellow')) this.classList.toggle('text-yellow-200');
                    else if (parentBg.includes('blue')) this.classList.toggle('text-blue-200');
                    else if (parentBg.includes('green')) this.classList.toggle('text-green-200');
                    else if (parentBg.includes('pink')) this.classList.toggle('text-pink-200');
                    else if (parentBg.includes('purple')) this.classList.toggle('text-purple-200');
                    else if (parentBg.includes('orange')) this.classList.toggle('text-orange-200');
                    else this.classList.toggle('text-gray-400');
                });
            });

            // 颜色选择器
            document.querySelectorAll('[class*="rounded-full cursor-pointer"]').forEach(color => {
                color.addEventListener('click', function() {
                    // 移除其他颜色的选中状态
                    this.parentNode.querySelectorAll('[class*="ring-"]').forEach(c => {
                        c.className = c.className.replace(/ring-\w+-\d+/g, '');
                    });
                    // 添加选中状态
                    this.classList.add('ring-2');
                    if (this.classList.contains('bg-yellow-400')) this.classList.add('ring-yellow-400');
                    if (this.classList.contains('bg-blue-400')) this.classList.add('ring-blue-400');
                    if (this.classList.contains('bg-green-400')) this.classList.add('ring-green-400');
                    if (this.classList.contains('bg-pink-400')) this.classList.add('ring-pink-400');
                    if (this.classList.contains('bg-purple-400')) this.classList.add('ring-purple-400');
                    if (this.classList.contains('bg-orange-400')) this.classList.add('ring-orange-400');
                });
            });

            // 字数统计
            const textarea = document.querySelector('textarea');
            const wordCount = document.querySelector('span:contains("字数")');
            if (textarea && wordCount) {
                textarea.addEventListener('input', function() {
                    const count = this.value.length;
                    wordCount.textContent = `字数：${count}`;
                });
            }
        });
    </script>
</body>
</html> 